<template>
  <div class="pagination">
    <!-- 首页 -->
    <button @click="goToFirstPage" :disabled="currentPage === 1">首页</button>

    <!-- 上一页 -->
    <button @click="goToPrevPage" :disabled="currentPage === 1">上一页</button>

    <!-- 前两页 -->
    <button
        v-if="currentPage - 2 >= 1"
        @click="goToPage(currentPage - 2)"
    >
      {{ currentPage - 2 }}
    </button>

    <!-- 前一页 -->
    <button
        v-if="currentPage - 1 >= 1"
        @click="goToPage(currentPage - 1)"
    >
      {{ currentPage - 1 }}
    </button>

    <!-- 当前页 -->
    <button class="current-page" disabled>
      {{ currentPage }}
    </button>

    <!-- 后一页 -->
    <button
        v-if="currentPage + 1 <= totalPages"
        @click="goToPage(currentPage + 1)"
    >
      {{ currentPage + 1 }}
    </button>

    <!-- 后两页 -->
    <button
        v-if="currentPage + 2 <= totalPages"
        @click="goToPage(currentPage + 2)"
    >
      {{ currentPage + 2 }}
    </button>

    <!-- 下一页 -->
    <button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>

    <!-- 末页 -->
    <button @click="goToLastPage" :disabled="currentPage === totalPages">末页</button>

    <!-- 当前页和总页数 -->
    <span class="page-info">
      第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
    </span>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  currentPage: {
    type: Number,
    required: true,
  },
  totalPages: {
    type: Number,
    required: true,
  },
});

const emit = defineEmits(['update:currentPage']);

// 跳转到首页
const goToFirstPage = () => {
  emit('update:currentPage', 1);
};

// 跳转到上一页
const goToPrevPage = () => {
  if (props.currentPage > 1) {
    emit('update:currentPage', props.currentPage - 1);
  }
};

// 跳转到下一页
const goToNextPage = () => {
  if (props.currentPage < props.totalPages) {
    emit('update:currentPage', props.currentPage + 1);
  }
};

// 跳转到末页
const goToLastPage = () => {
  emit('update:currentPage', props.totalPages);
};

// 跳转到指定页
const goToPage = (page) => {
  if (page >= 1 && page <= props.totalPages) {
    emit('update:currentPage', page);
  }
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.pagination button {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pagination button:hover:not(:disabled) {
  background-color: #0056b3; /* 深蓝色 */
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.pagination .current-page {
  background-color: #17a2b8; /* 青色 */
  cursor: default;
}

.page-info {
  margin-left: 10px;
  font-size: 0.9rem;
  color: #333;
}
</style>